<template>
  <div>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, sizes, slot,prev"
        :total="total"
      >
        <div class="first-pager" @click="jumpPage('1')">首页</div>
      </el-pagination>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="pager,next,slot, jumper"
        :total="total"
      >
        <div class="last-pager" @click="jumpPage('0')">末页</div>
      </el-pagination>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="slot"
        :total="total"
      >
        <div class="ensure-btn" @click="clickEnter()">确定</div>
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
    };
  },
  created() {},
  computed: {},
  methods: {
    jumpPage(val) {
      switch (val) {
        case "1": //跳转到首页
          this.$emit("changeCurrentPage", 1);
          break;
        case "0": //跳转到末页
          this.$emit("changeCurrentPage", this.total / this.pageSize);
          break;
      }
    },
    clickEnter() {
      this.$emit("changeCurrentPage", this.currentPage);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang='less'  scoped>
</style>
